<template>
  <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
    <template #header>
      <div class="card-header">
        <span>公告</span>
        <div style="text-align: right">
          <el-button plain size="small" type="primary" @click="this.createTipsState.open = true;">首页提示语</el-button>
          <el-button plain size="small" type="primary" @click="this.createDataState.open = true;this.createDataState.id = null;">新增</el-button>
        </div>
      </div>
    </template>
    <el-form ref="searchForm" :inline="true" :model="search" status-icon>
      <el-form-item label="标题" prop="title">
        <el-input v-model.trim="search.title" clearable style="width: 170px"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button plain type="primary" @click="this.$refs['searchForm'].resetFields();this.list()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data" border class="top" stripe style="width: 100%;margin-top: 0">
      <el-table-column label="标题" min-width="150" prop="title" show-overflow-tooltip/>
      <el-table-column label="发布日期" width="150" prop="createTime" show-overflow-tooltip/>
      <el-table-column align="center" fixed="right" width="100">
        <template #default="scope">
          <a class="op" @click="this.createDataState.open = true;this.createDataState.id = scope.row.id;">更新</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="paging.currentPage"
        :default-page-size="20"
        :page-size="paging.pageSize"
        :page-sizes="[20, 50, 100]"
        :total="paging.totalRow"
        background
        layout="sizes, prev, pager, next"
        style="margin-top: 20px;margin-bottom: 20px;float: right"
        @size-change="sizeChange"
        @current-change="currentChange"
    />
  </el-card>
  <create :state="createDataState" @updated="list"/>
  <create-tips :state="createTipsState"/>
</template>
<script>

import Create from "@/views/notice/Create.vue";
import CreateTips from "@/views/notice/CreateTips.vue";

export default {
  name: "List",
  components: {Create,CreateTips},
  data() {
    return {
      search: {title: null, content: null},
      createDataState: {open: false, id: null},
      createTipsState: {open: false,type: null},
      data: [],
      paging: {currentPage: 1, pageSize: 20, totalRow: 0}
    }
  },
  async created() {
    await this.list()
  },
  methods: {
    sizeChange(pageSize) {
      this.paging.pageSize = pageSize;
      this.list();
    },
    currentChange(currentPage) {
      this.paging.currentPage = currentPage;
      this.list();
    },
    async list() {
      let data = await this.post('/notice/list/' + this.paging.pageSize + '/' + this.paging.currentPage, {
        ...this.search
      });
      this.data = data.data
      this.paging.totalRow = parseInt(data.totalRow)
    }
  }
}
</script>

<style scoped>
a.op {
  font-size: 13px;
}
.exam-tips:hover button {
   display: block !important;
 }
</style>